<template>
  <div class="first-step-wrapper">
    <div class="header">
      <div class="header-title">
        <span class="title-text">选择你的科目</span>
      </div>
    </div>
    <div class="form-box">
      <div class="form-item">
        <div class="form-item-title">首选科目</div>
        <div class="feature-box-feature">
          <div
            :class="{
              'province-item': true,
              active: item.checked,
            }"
            v-for="(item, index) in mainSubjects"
            :key="index"
            @click="onClickMainItem(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-title">再选科目</div>
        <div class="feature-box-feature">
          <div
            :class="{
              'province-item': true,
              active: item.checked,
            }"
            v-for="(item, index) in minorSubjects"
            :key="index"
            @click="onClickMinorItem(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="btn-box">
        <div class="btn" @click="goNext">下一步</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { useSubjectSelectStore } from '@/store/subjectSelect';
import { mainSubjectList, minorSubjectList } from '@/utils/subjectData';
import { showToast } from 'vant';

const emit = defineEmits(['goNext']);

const store = useSubjectSelectStore();

const mainSubjects = ref(cloneDeep(mainSubjectList));

const minorSubjects = ref(cloneDeep(minorSubjectList));

const selectMainSubject = ref('');
const onClickMainItem = (item, index) => {
  selectMainSubject.value = item.name;
  mainSubjects.value.forEach((item) => {
    item.checked = false;
  });
  item.checked = !item.checked;
};

const selectMinorSubject = ref([]);
const onClickMinorItem = (item, index) => {
  // 如果当前项未选中，且已经有2个选中项，则不允许再选
  const selectedItems = minorSubjects.value.filter((item) => item.checked);
  if (!item.checked && selectedItems.length >= 2) {
    showToast('最多只能选择2个科目');
    return;
  }

  // 切换当前项的选中状态
  item.checked = !item.checked;

  // 更新selectMinorSubject为当前所有选中的科目名称
  selectMinorSubject.value = minorSubjects.value
    .filter((item) => item.checked)
    .map((item) => item.name);
};

const goNext = () => {
  const checkedMainId = mainSubjects.value.filter((item) => item.checked);
  // .map((item) => item.id);
  if (checkedMainId.length == 0) {
    showToast('请选择首选科目');
    return;
  }
  const checkedMinorId = minorSubjects.value.filter((item) => item.checked);
  // .map((item) => item.id);
  if (checkedMinorId.length < 2) {
    showToast('请选择2个再选科目');
    return;
  }
  const selectIds = [...checkedMainId, ...checkedMinorId];
  store.setIntelligenceSubject(selectIds);

  emit('goNext');
};
</script>

<style scoped lang="scss">
.first-step-wrapper {
  margin: 0 auto;
  width: 50vw;
  .header {
    display: flex;
    .robot-icon {
      width: 136px;
      height: 120px;
      margin-right: 18px;
    }
    .header-title {
      display: flex;
      flex-direction: column;
      .title-text {
        font-weight: bold;
        font-size: 44px;
        color: #000000;
        margin-bottom: 20px;
        white-space: nowrap;
      }
      .title-desc {
        font-weight: 400;
        font-size: 22px;
        color: #555555;
        white-space: nowrap;
      }
    }
  }
  .form-box {
    margin-top: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 48px 32px;
    position: relative;
    border-radius: 32px;
    background-color: #f6fbfe;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 32px;
      padding: 2px;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1),
        rgba(206, 231, 245, 1)
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .form-item {
      position: relative;
      z-index: 1;
      justify-content: space-between;
      padding: 24px 0;
      border-bottom: 1px solid $border-color;
      &:first-child {
        padding-top: 0;
      }
      .form-item-title {
        display: flex;
        align-items: center;
        font-size: 26px;
        color: $title-color;
        font-weight: bold;
      }
      .form-item-content {
        display: flex;
        align-items: center;
        font-size: 26px;
        color: $title-color;
        font-weight: bold;
        .form-item-content-item {
          padding: 0;
          margin-right: 12px;
          &.disabled {
            color: #999;
          }
        }
        .arrow {
          width: 30px;
          height: 30px;
        }
        :deep(.van-field) {
          background-color: #f6fbfe;
          .van-field__control {
            font-size: 26px;
            color: #000000;
          }
        }
      }
      .feature-box-feature {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 24px;
        .province-item {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          font-family: 'PingFang-SC, PingFang-SC';
          font-size: 26px;
          padding: 8px 28px;
          color: #333333;
          background: #fff;
          border: #fff 1px solid;
          &.active {
            color: $primary-color;
            border: $primary-color 1px solid;
            background: #e5edff;
          }
        }
      }
    }
    .btn-box {
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 48%;
        text-align: center;
        background: $primary-color;
        border-radius: 12px;
        font-weight: bold;
        font-size: 26px;
        color: #ffffff;
        margin-top: 40px;
        padding: 16px 0;
      }
      .spe {
        position: relative;
        background: linear-gradient(240deg, #597dff 0%, #9d19ff 100%);
      }
      .new-icon {
        position: absolute;
        top: -18px;
        right: 14px;
        width: 72px;
        height: 40px;
      }
    }
  }
}
</style>
